<template>
  <div v-show="mapLoadingText.length>0" class="loading-panel">
    <div class="loading-circle" />
    <div class="loadingBox">
      <span v-for="(item,index) in mapLoadingText" :key="index" class="row">{{ item }}</span>
    </div>

    <span v-if="isShowCancle" class="cancle" @click="hideLoading() ">取消</span>
  </div>
</template>

<script>
export default {
    name: 'MapLoading',
    data() {
        return {
            isShowCancle: false
        }
    },
    computed: {
        mapLoadingText() {
            return this.$store.getters.mapLoadingText
        }
    },

    watch: {
        mapLoadingText: {
            handler: function(val) {
                this.showCancel(val.length > 0)
            },

            immediate: true
        }
    },
    mounted() {
    },
    methods: {
        hideLoading() {
            this.$store.dispatch('mapLoadingText', [])
        },
        showCancel(isLoading) {
            if (isLoading) {
                this.isShowCancle = false
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                this.timer = setTimeout(() => {
                    this.isShowCancle = true
                }, 5000)
            } else {
                this.isShowCancle = false
            }
        }
    }
}
</script>

<style scoped lang="scss">
    .loading-panel {
        transition: all 0.2s;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 100;
        text-align: center;
        padding-top: 40vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        @keyframes rotate-1 {
            from {
                transform: rotate(0deg)
            }
            to {
                transform: rotate(360deg)
            }
        }

        .loading-circle {
            position: relative;
            width: 50px;
            height: 50px;
            border: 2px solid #1890ff;
            border-bottom-color: #0003;
            border-radius: 100%;
            animation: rotate-1 infinite .75s linear;
            z-index: 100;
            /*border: 1px solid #F88;*/
        }

        .loadingBox {
            margin-top: 10px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #1890ff;

            .row {
                white-space: nowrap;
            }
        }

        .cancle {
            color: #1890ff;
            cursor: pointer;
            text-decoration: underline
        }
    }
</style>
